<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/ctx.js"></script>
</head>
<body>
<div id="cesiumContainer">
</div>
<div id="toolbar">
    <table>
        <tbody><tr>
            <td>hueShift</td>
            <td>
                <input type="range" min="-1" max="1" step="0.01" data-bind="value: hueShift, valueUpdate: 'input'">
                <input type="text" size="5" data-bind="value: hueShift">
            </td>
        </tr>
        <tr>
            <td>saturationShift</td>
            <td>
                <input type="range" min="-1" max="1" step="0.01" data-bind="value: saturationShift, valueUpdate: 'input'">
                <input type="text" size="5" data-bind="value: saturationShift">
            </td>
        </tr>
        <tr>
            <td>brightnessShift</td>
            <td>
                <input type="range" min="-1" max="1" step="0.01" data-bind="value: brightnessShift, valueUpdate: 'input'">
                <input type="text" size="5" data-bind="value: brightnessShift">
            </td>
        </tr>
        </tbody></table>
</div>


<script>
    var initCesium = new InitCesium();

    var viewer = initCesium.initViewer('cesiumContainer',{
        sceneModePicker:false
    });
    var scene = viewer.scene;
    var skyAtmosphere = scene.skyAtmosphere;
    var globe = scene.globe;

    // The viewModel tracks the state of our mini application.
    var viewModel = {
        hueShift: 0.0,
        saturationShift: 0.0,
        brightnessShift: 0.0
    };
    // Convert the viewModel members into knockout observables.
    Cesium.knockout.track(viewModel);

    // Bind the viewModel to the DOM elements of the UI that call for it.
    var toolbar = document.getElementById('toolbar');
    Cesium.knockout.applyBindings(viewModel, toolbar);

    // Make the skyAtmosphere's HSB parameters subscribers of the viewModel.
    function subscribeParameter(name, globeName) {
        Cesium.knockout.getObservable(viewModel, name).subscribe(
                function(newValue) {
                    skyAtmosphere[name] = newValue;
                    globe[globeName] = newValue;
                }
        );
    }

    subscribeParameter('hueShift', 'atmosphereHueShift');
    subscribeParameter('saturationShift', 'atmosphereSaturationShift');
    subscribeParameter('brightnessShift', 'atmosphereBrightnessShift');

    Sandcastle.addToggleButton('Lighting', globe.enableLighting, function(checked) {
        globe.enableLighting = checked;
    });

    Sandcastle.addToggleButton('Fog', scene.fog.enabled, function(checked) {
        scene.fog.enabled = checked;
    });

    var camera = viewer.camera;
    camera.setView({
        destination : Cesium.Cartesian3.fromDegrees(-75.5847, 40.0397, 1000.0),
        orientation: {
            heading : -Cesium.Math.PI_OVER_TWO,
            pitch : 0.2,
            roll : 0.0
        }
    });


</script>
</body>
</html>